<!-- 批量删除，没有制作单个删除的 -->
<template>
  <el-dialog
    v-model="visible"
    title="批量删除确认"
    width="500px"
    :before-close="handleClose"
  >
    <p>确定要删除选中的 {{ ids.length }} 个文档吗？删除后将无法恢复！</p>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="danger" @click="confirmDelete" :loading="deleting">
        确认删除
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { batchDeleteDocuments } from '@/api/document'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  ids: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)
const deleting = ref(false)

// 监听modelValue变化
watch(() => props.modelValue, (val) => {
  visible.value = val
})

// 监听visible变化
watch(visible, (val) => {
  emit('update:modelValue', val)
})

// 关闭对话框
const handleClose = () => {
  visible.value = false
}

// 确认删除
const confirmDelete = async () => {
  try {
    deleting.value = true    
    await batchDeleteDocuments(props.ids)
    ElMessage.success(`成功删除 ${props.ids.length} 个文档`)
    emit('success')
    handleClose()
  } catch (error) {
    console.error('批量删除失败:', error)
    ElMessage.error('批量删除失败')
  } finally {
    deleting.value = false
  }
}
</script>